.player{
  position: absolute;
  top 0
  left 0
  display flex
  flex-wrap wrap
  justify-content center
  align-items stretch
  width 100vw
  height calc(100vh - 90px)
  &>.user-vision{
    background-color: #333;
    flex 0 0 33.33333%
  }
  &>.user-vision:first-child:nth-last-child(1){
    flex 1 0 100%
  }
  &>.user-vision:first-child:nth-last-child(2),
  &>.user-vision:first-child:nth-last-child(2) ~ div,
  &>.user-vision:first-child:nth-last-child(3),
  &>.user-vision:first-child:nth-last-child(3) ~ div,
  &>.user-vision:first-child:nth-last-child(4),
  &>.user-vision:first-child:nth-last-child(4) ~ div
  {
    flex 0 0 50%
  }
  &>div:nth-child(4):nth-last-child(2),
  &>div:nth-child(4):nth-last-child(2) ~ div{
    flex 0 0 50%
  }

  &.screen-share-player{
    flex-direction column-reverse
    justify-content flex-end
    justify-items flex-end
    align-items stretch
    .screen-share-vision{
      order: -1;
      flex 0 0 100% !important
      width 70%
      &.screen-share-vision-pined{
        width: 100%
      }
    }
    .user-vision:first-child:nth-last-child(2):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(2) ~ div:not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(3):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(3) ~ div:not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(4):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(4) ~ div:not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(5):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(5) ~ div:not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(6):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(6) ~ div:not(.screen-share-vision)
    {
      width 30%
      flex 0 0 50%
    }
    .user-vision:first-child:nth-last-child(4):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(4) ~ div:not(.screen-share-vision){
      flex 0 0 33.3333333%
    }
    .user-vision:first-child:nth-last-child(5):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(5) ~ div:not(.screen-share-vision){
      flex 0 0 25%
    }
    .user-vision:first-child:nth-last-child(6):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(6) ~ div:not(.screen-share-vision){
      flex 0 0 20%
    }
    .user-vision:first-child:nth-last-child(7):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(7) ~ div:not(.screen-share-vision){
      width: 15%
      flex 0 0 33.3333333%
    }
    .user-vision:first-child:nth-last-child(8):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(8) ~ div:not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(9):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(9) ~ div:not(.screen-share-vision)
    {
      width: 15%
      flex 0 0 25%
    }
    .user-vision:first-child:nth-last-child(10):not(.screen-share-vision),
    .user-vision:first-child:nth-last-child(10) ~ div:not(.screen-share-vision)
    {
      width: 15%
      flex 0 0 20%
    }
  }

  & .user-vision {
    position: relative;
    .player-vision {
      width: 100%
      height: 100%
    }
    & .ban{
      z-index 2
      display flex
      justify-content center
      align-items center
      position: absolute;
      bottom: 0;
      left: 50%;
      transform translateX(-50%);
      flex-direction row
      cursor pointer
      border-radius 8px
      color $main_color
      background-color: rgba(238,238,238,0.6);
      padding 2px 0 2px 10px
      &:hover{
        background-color: #eee;
      }
      p{
        position: relative;
        margin 4px 0
        padding 4px 10px 4px 28px
        word-break: keep-all
        white-space: nowrap
        &:before{
          position: absolute;
          left 6px
          top 50%
          transform translateY(-50%)
          display block
          content ""
          width 16px
          height 16px
          background center / contain  no-repeat url("~@/assets/yonghu.svg")
        }
      }
    }
    & .central{
      position: absolute
      top: 50%
      left: 50%
      display flex
      align-items center
      justify-content space-around;
      transform translate(-50%,-50%);
      padding 8px 18px
      background-color: rgba(210,210,210,0.8);
      border-radius 10px
      opacity: 0
      transition opacity 0.3s linear
    }
    &:hover{
      & .central{
        opacity 1
        z-index 2
      }
    }
  }
}
